﻿
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
            HTML+CSS基础课程-慕课网
    </title>
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
<meta name="renderer" content="webkit">
<meta property="qc:admins" content="77103107776157736375" />
<meta property="wb:webmaster" content="c4f857219bfae3cb" />
<meta http-equiv="Access-Control-Allow-Origin" content="*" />
<meta http-equiv="Cache-Control" content="no-transform " />
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline' 'unsafe-eval' *.imooc.com *.mukewang.com *.baidu.com *.sina.com.cn *.bootcss.com">

<meta name="Keywords" content="" />

<meta name="description" content="通过学习HTML+CSS基础课程，轻松学习HTML、CSS样式基础知识，可以利用HTML、CSS样式技术制作出简单页面，没有任何WEB经验的WEB应用程序开发者、对WEB前端技术感兴趣的用户均可学习" />







<link rel="stylesheet" href="css/moco.min_1.css" type="text/css" />

<script type="text/javascript">

eval(function(p,a,c,k,e,d){e=function(c){return(c<a?"":e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)d[e(c)]=k[c]||e(c);k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1;};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p;}('!4(){3 6=a;3 l=4(){3 b,e=9 y("(^| )"+"c=([^;]*)(;|$)");j(b=h.g.z(e)){k w(b[2])}x{k a}};3 8=4(t){3 f=l();3 7=9 o();7.A(7.d()+B*i*i*r);h.g="c="+t+";s="+7.M()+";N=/;L=O.m";j(t&&t!=f){Q.P.G()}};3 5=9 E();5.H=4(){K(6);6=a;8(0)};5.J=4(){8(1)};6=I(4(){5.n="";8(1)},F);5.n=\'R://p.u.m/p/v/q/D.C?t=\'+9 o().d()}()',54,54,'|||var|function|imgobj|timer|exp|setcookie|new|null|arr|IMCDNS|getTime|reg|_0|cookie|document|60|if|return|getcookie|com|src|Date|static|common|1000|expires||mukewang|img|unescape|else|RegExp|match|setTime|24|png|logo|Image|3000|reload|onload|setTimeout|onerror|clearTimeout|domain|toGMTString|path|imooc|location|window|http'.split('|'),0,{}))

</script>


<script type="text/javascript">

var OP_CONFIG={"module":"course","page":"learn","userout":0};
var isLogin = 0;
var is_choice = "";
var seajsTimestamp="v=201705081743";
var _msg_unread = 0; 
var _not_unread = 0; 
var _cart_num = 0;
</script>








<script>
/*学习页通用配置*/
var GC = {
  course: {
    id: 9,
    name: 'HTML+CSS基础课程',
    pic: '',
    video_url: ''
  },
  classmates: 20 // 你的同学一页显示数量
};


</script>
<script>

var hasLearn;
    hasLearn = 0;

</script>




<link rel="stylesheet" href="css/d032c1004618449aaa539331a0fee6c1.css" type="text/css" />
</head>
<body >

<div id="header">
    <div class="page-container" id="nav">
        <div id="logo" class="logo"><a href="/" target="_self" class="hide-text" title="首页">慕课网</a></div>


        <button type="button" class="navbar-toggle visible-xs-block js-show-menu" >
            <i class="icon-menu"></i>
        </button>
        <ul class="nav-item">
                        <li class="set-btn visible-xs-block"><a href="/user/newlogin" target="_self">登录</a> / <a href="/user/newsignup" target="_self">注册</a></li>
                        
            <li>
                <a href="/course/list" class="active" target="_self">课程</a>
            </li>
            <li><a href="http://class.imooc.com" class="program-nav " target="_self">职业路径<i class="icn-new"></i></a></li>
            <li>
                <a href="http://coding.imooc.com" target="_self">实战</a>
            </li>
            <li><a href="/wenda"  target="_self">猿问</a></li>
            <li><a href="/article"  target="_self">手记</a></li>
            
        </ul>
                <div id="login-area">
            <ul class="header-unlogin clearfix">
                <li class="shop-cart" id="shop-cart">
                    <a href="http://order.imooc.com/pay/cart" class="shop-cart-icon" target="_blank">
                        <span class="icon-shopping-cart js-endcart"></span>
                        <span class="shopping_icon js-cart-num" data-ordernum="0"  data-cartnum="0" style='display: none'>0</span>
                        <span>购物车</span>
                    </a>
                    <div class="my-cart" id="js-my-cart"></div>
                </li>
                <li class="header-signin">
                    <a href="#" id="js-signin-btn">登录</a>
                </li>
                <li class="header-signup">
                    <a href="#" id="js-signup-btn">注册</a>
                </li>
            </ul>
        </div>
                <div class='search-warp clearfix' style='min-width: 32px; height: 60px;'>
                            <div class="pa searchTags" >
                                    <a href="http://class.imooc.com/sc/20" target="_blank">前端小白</a>
                                    <a href="http://class.imooc.com/sc/22" target="_blank">PHP入门</a>
                                </div>
            
            <div class="search-area" data-search="top-banner">
                <input class="search-input" data-suggest-trigger="suggest-trigger"      type="text" autocomplete="off">
                <input type='hidden' class='btn_search' data-search-btn="search-btn" />
                <ul class="search-area-result" data-suggest-result="suggest-result">
                </ul>
            </div>
            <div class='showhide-search' data-show='no'><i class='icon-search'></i></div>
        </div>
    </div>
</div>

<div class="bindHintBox js-bindHintBox hide">
    <div class="pr">
        为了账号安全，请及时绑定邮箱和手机<a href="/user/setbindsns" class="ml20 color-red" target="_blank">立即绑定</a>
        <button  class="closeBindHint js-closeBindHint" type="button"></button>
        <div class="arrow"> </div>
    </div>
</div>


<div id="main">

<div class="course-infos">
    <div class="w pr">
        <div class="path">  
            <a href="/course/list">课程</a>
                        <i class="path-split">\</i><a href="/course/list?c=fe">前端开发</a>
                                    <i class="path-split">\</i><a href="/course/list?c=html">HTML/CSS</a>
                        <i class="path-split">\</i><a href="/learn/9"><span>HTML+CSS基础课程</a></span>
        </div>
        <div class="hd clearfix">
            <h2 class="l">HTML+CSS基础课程</h2>
                    </div>

        <div class="statics clearfix">
            
                        <div class="moco-btn l learn-btn green-btn red-btn"> 
                <a href="/code/49" class="J-learn-course">开始学习</a>
                <em></em>
                <i class="follow-action js-follow-action"></i>
            </div>
                        
            
                        
            <div class="static-item l">
                <span class="meta">学习人数</span>
                <span class="meta-value js-learn-num"></span>
                            </div>
            <div class="static-item l">
                <span class="meta">难度级别</span>
                <span class="meta-value">初级</span>
                <em></em>
            </div>
            <div class="static-item l">
                <span class="meta">课程时长</span>
                <span class="meta-value"> 9小时18分</span>
                <em></em>
            </div>
            <div class="static-item l score-btn">
                <span class="meta">综合评分</span>
                <span class="meta-value">9.5</span>
                <em></em>
                
                                
                <div class="score-wrap icon-drop_up triangle">
                    <div class="score-box">
                        <a href="/coursescore/9" class="person-num">
                            <span class="person-num l">6730人评价</span>
                        </a>
                                                                                <a href="/coursescore/9?page=1" class="evaluation-btn r">查看评价</a>
                                                                            <div class="score-detail-box">
                            <div class="score-static-item">
                                <span class="meta-value">9.8</span>
                                <span class="meta">内容实用</span>
                            </div>
                            <div class="score-static-item">
                                <span class="meta-value">9.5</span>
                                <span class="meta">简洁易懂</span>
                                <em></em>
                            </div>
                            <div class="score-static-item">
                                <span class="meta-value">9.2</span>
                                <span class="meta">逻辑清晰</span>
                                <em></em>
                            </div>
                        </div>
                    </div>
                </div>
                
            </div>
            
        </div>
        <div class="extra">
            <!-- credit -->
            <div class="share-rl-tips share-posi js-share-statue">
                <span class="icon-drop_up share-triangle"></span>
                <span>分享即可 +</span><strong>1积分</strong>
            </div>
            <!-- share -->
            <div class="share-action r bdsharebuttonbox">
                <a href="javascript:;" class="share wx js-share icon-share-weichat" data-cmd="weixin"></a>
                <a href="javascript:;" class="share qq js-share icon-share-qq" data-cmd="qzone"></a>
                <a href="javascript:;" class="share sina js-share icon-share-weibo" data-cmd="tsina"></a>
            </div>
        </div>
    </div>
    <div class="info-bg" id="js-info-bg">
        <div class="cover-img-wrap">
        <img data-src="picture/55af49ad000116a506000338.jpg" alt="" style="display: none" id="js-cover-img">
        </div>
        <div class="cover-mask"></div>
    </div>
    
        
</div>


<div class="course-info-main clearfix w">
    <div class="content-wrap">
        <div class="content">
                        <!-- 课程公告 -->
                        <!-- 课程简介 -->
            <div class="course-brief">
                <p class="auto-wrap">简介：本课程从最基本的概念开始讲起，步步深入，带领大家学习HTML、CSS样式基础知识，了解各种常用标签的意义以及基本用法，后半部分讲解CSS样式代码添加，为后面的案例课程打下基础。</p>
            </div>
            <!-- 课程简介 end -->
            <div class="mod-tab-menu ">
	<ul class="course-menu clearfix">
		<li><a class="ui-tabs-active active" id="learnOn"  href="/learn/9"><span>章节</span></a></li>
		<li><a id="commentOn" class="" href="/comment/9"><span>评论</span></a></li>
		<li><a id="qaOn" class="" href="/qa/9/t/1?page=1"><span>问答</span></a></li>
		<li><a id="noteOn" class="" href="/note/9?sort=last&page=1"><span>笔记</span></a></li>
	    <!--
        <li><a id="wikiOn" class="" href="/wiki/9">WIKI</a></li>
        -->
	</ul>
	
</div><!-- 课程面板 -->
            <!-- 课程章节 -->
            <div class="mod-chapters">
                                        <div class="chapter ">
                    <!-- 章节标题 -->
                    <h3>
                        
                        <span class="icon-drop_down js-close"></span>
                        <strong>
                            <i class="icon-chapter"></i>
                            第1章 Html介绍
                            <div class="icon-info chapter-info">
                                <i class="icon-drop_up triangle">
                                    <div class="chapter-introubox">
                                        <div class="chapter-content">本章节主要讲解html和css样式的关系，以及html标签、html文件结构、head标签,最后讲解了在html中的注释代码的作用。</div>
                                    </div>
                                </i>
                            </div>
                        </strong>
                        
                    </h3>
                    <!-- 章节标题 end -->
                    <!-- 章节小节 -->
                                        <ul class="video">
                                                <li data-media-id="49">
                                                            <a href='/code/49' class="J-media-item">
                                    <i class="icon-code type"></i>
                                    1-1 代码初体验，制作我的第一个网页
                                    
                                                                        <button class="r moco-btn moco-btn-red preview-btn">开始学习</button>
                                                                        
                                </a>
                                                        <!-- 未登录时 -->
                            <!-- <a target="_blank" href="/video/1430" class="J-media-item studyvideo">1-1 Java简介 (05:49)
                                <button class="r moco-btn moco-btn-blue preview-btn">预览</button>
                            </a> -->
                        </li>
                                                <li data-media-id="52">
                                                            <a href='/code/52' class="J-media-item">
                                    <i class="icon-code type"></i>
                                    1-2 Html和CSS的关系
                                    
                                                                        <button class="r moco-btn moco-btn-red preview-btn">开始学习</button>
                                                                        
                                </a>
                                                        <!-- 未登录时 -->
                            <!-- <a target="_blank" href="/video/1430" class="J-media-item studyvideo">1-1 Java简介 (05:49)
                                <button class="r moco-btn moco-btn-blue preview-btn">预览</button>
                            </a> -->
                        </li>
                                                <li data-media-id="54">
                                                            <a href='/code/54' class="J-media-item">
                                    <i class="icon-code type"></i>
                                    1-3 认识html标签
                                    
                                                                        <button class="r moco-btn moco-btn-red preview-btn">开始学习</button>
                                                                        
                                </a>
                                                        <!-- 未登录时 -->
                            <!-- <a target="_blank" href="/video/1430" class="J-media-item studyvideo">1-1 Java简介 (05:49)
                                <button class="r moco-btn moco-btn-blue preview-btn">预览</button>
                            </a> -->
                        </li>
                                                <li data-media-id="83">
                                                            <a href='/code/83' class="J-media-item">
                                    <i class="icon-code type"></i>
                                    1-4 标签的语法
                                    
                                                                        <button class="r moco-btn moco-btn-red preview-btn">开始学习</button>
                                                                        
                                </a>
                                                        <!-- 未登录时 -->
                            <!-- <a target="_blank" href="/video/1430" class="J-media-item studyvideo">1-1 Java简介 (05:49)
                                <button class="r moco-btn moco-btn-blue preview-btn">预览</button>
                            </a> -->
                        </li>
                                                <li data-media-id="56">
                                                            <a href='/code/56' class="J-media-item">
                                    <i class="icon-code type"></i>
                                    1-5 认识html文件基本结构
                                    
                                                                        <button class="r moco-btn moco-btn-red preview-btn">开始学习</button>
                                                                        
                                </a>
                                                        <!-- 未登录时 -->
                            <!-- <a target="_blank" href="/video/1430" class="J-media-item studyvideo">1-1 Java简介 (05:49)
                                <button class="r moco-btn moco-btn-blue preview-btn">预览</button>
                            </a> -->
                        </li>
                                                <li data-media-id="74">
                                                            <a href='/code/74' class="J-media-item">
                                    <i class="icon-code type"></i>
                                    1-6 认识head标签
                                    
                                                                        <button class="r moco-btn moco-btn-red preview-btn">开始学习</button>
                                                                        
                                </a>
                                                        <!-- 未登录时 -->
                            <!-- <a target="_blank" href="/video/1430" class="J-media-item studyvideo">1-1 Java简介 (05:49)
                                <button class="r moco-btn moco-btn-blue preview-btn">预览</button>
                            </a> -->
                        </li>
                                                <li data-media-id="75">
                                                            <a href='/code/75' class="J-media-item">
                                    <i class="icon-code type"></i>
                                    1-7 了解HTML的代码注释
                                    
                                                                        <button class="r moco-btn moco-btn-red preview-btn">开始学习</button>
                                                                        
                                </a>
                                                        <!-- 未登录时 -->
                            <!-- <a target="_blank" href="/video/1430" class="J-media-item studyvideo">1-1 Java简介 (05:49)
                                <button class="r moco-btn moco-btn-blue preview-btn">预览</button>
                            </a> -->
                        </li>
                                            </ul>
                                        <!-- 章节小节 end -->
                </div>
                            <div class="chapter chapter-active">
                    <!-- 章节标题 -->
                    <h3>
                        
                        <span class="icon-drop_down js-close"></span>
                        <strong>
                            <i class="icon-chapter"></i>
                            第2章 认识标签(第一部分)
                            <div class="icon-info chapter-info">
                                <i class="icon-drop_up triangle">
                                    <div class="chapter-introubox">
                                        <div class="chapter-content">学完这一章节将对标签的使用有了一些初步的认识，可以使用标签制作出一篇简单的文章网页。下一章节我们将进一步学习另外一部分html标签。</div>
                                    </div>
                                </i>
                            </div>
                        </strong>
                        
                    </h3>
                    <!-- 章节标题 end -->
                    <!-- 章节小节 -->
                                        <ul class="video">
                                                <li data-media-id="76">
                                                            <a href='/code/76' class="J-media-item">
                                    <i class="icon-code type"></i>
                                    2-1 语义化，让你的网页更好的被搜索引擎理解
                                    
                                                                        <button class="r moco-btn moco-btn-red preview-btn">开始学习</button>
                                                                        
                                </a>
                                                        <!-- 未登录时 -->
                            <!-- <a target="_blank" href="/video/1430" class="J-media-item studyvideo">1-1 Java简介 (05:49)
                                <button class="r moco-btn moco-btn-blue preview-btn">预览</button>
                            </a> -->
                        </li>
                                                <li data-media-id="77">
                                                            <a href='/code/77' class="J-media-item">
                                    <i class="icon-code type"></i>
                                    2-2 &lt;body&gt;标签，网页上显示的内容放在这里
                                    
                                                                        <button class="r moco-btn moco-btn-red preview-btn">开始学习</button>
                                                                        
                                </a>
                                                        <!-- 未登录时 -->
                            <!-- <a target="_blank" href="/video/1430" class="J-media-item studyvideo">1-1 Java简介 (05:49)
                                <button class="r moco-btn moco-btn-blue preview-btn">预览</button>
                            </a> -->
                        </li>
                                                <li data-media-id="78">
                                                            <a href='/code/78' class="J-media-item">
                                    <i class="icon-code type"></i>
                                    2-3 开始学习&lt;p&gt;标签，添加段落
                                    
                                                                        <button class="r moco-btn moco-btn-red preview-btn">开始学习</button>
                                                                        
                                </a>
                                                        <!-- 未登录时 -->
                            <!-- <a target="_blank" href="/video/1430" class="J-media-item studyvideo">1-1 Java简介 (05:49)
                                <button class="r moco-btn moco-btn-blue preview-btn">预览</button>
                            </a> -->
                        </li>
                                                <li data-media-id="84">
                                                            <a href='/code/84' class="J-media-item">
                                    <i class="icon-code type"></i>
                                    2-4 了解&lt;hx&gt;标签，为你的网页添加标题
                                    
                                                                        <button class="r moco-btn moco-btn-red preview-btn">开始学习</button>
                                                                        
                                </a>
                                                        <!-- 未登录时 -->
                            <!-- <a target="_blank" href="/video/1430" class="J-media-item studyvideo">1-1 Java简介 (05:49)
                                <button class="r moco-btn moco-btn-blue preview-btn">预览</button>
                            </a> -->
                        </li>
                                                <li data-media-id="85">
                                                            <a href='/code/85' class="J-media-item">
                                    <i class="icon-code type"></i>
                                    2-5 加入强调语气，使用&lt;strong&gt;和&lt;em&gt;标签
                                    
                                                                        <button class="r moco-btn moco-btn-red preview-btn">开始学习</button>
                                                                        
                                </a>
                                                        <!-- 未登录时 -->
                            <!-- <a target="_blank" href="/video/1430" class="J-media-item studyvideo">1-1 Java简介 (05:49)
                                <button class="r moco-btn moco-btn-blue preview-btn">预览</button>
                            </a> -->
                        </li>
                                                <li data-media-id="87">
                                                            <a href='/code/87' class="J-media-item">
                                    <i class="icon-code type"></i>
                                    2-6 使用&lt;span&gt;标签为文字设置单独样式
                                    
                                                                        <button class="r moco-btn moco-btn-red preview-btn">开始学习</button>
                                                                        
                                </a>
                                                        <!-- 未登录时 -->
                            <!-- <a target="_blank" href="/video/1430" class="J-media-item studyvideo">1-1 Java简介 (05:49)
                                <button class="r moco-btn moco-btn-blue preview-btn">预览</button>
                            </a> -->
                        </li>
                                                <li data-media-id="88">
                                                            <a href='/code/88' class="J-media-item">
                                    <i class="icon-code type"></i>
                                    2-7 &lt;q&gt;标签，短文本引用
                                    
                                                                        <button class="r moco-btn moco-btn-red preview-btn">开始学习</button>
                                                                        
                                </a>
                                                        <!-- 未登录时 -->
                            <!-- <a target="_blank" href="/video/1430" class="J-media-item studyvideo">1-1 Java简介 (05:49)
                                <button class="r moco-btn moco-btn-blue preview-btn">预览</button>
                            </a> -->
                        </li>
                                                <li data-media-id="89">
                                                            <a href='/code/89' class="J-media-item">
                                    <i class="icon-code type"></i>
                                    2-8 &lt;blockquote&gt;标签，长文本引用
                                    
                                                                        <button class="r moco-btn moco-btn-red preview-btn">开始学习</button>
                                                                        
                                </a>
                                                        <!-- 未登录时 -->
                            <!-- <a target="_blank" href="/video/1430" class="J-media-item studyvideo">1-1 Java简介 (05:49)
                                <button class="r moco-btn moco-btn-blue preview-btn">预览</button>
                            </a> -->
                        </li>
                                                <li data-media-id="97">
                                                            <a href='/code/97' class="J-media-item">
                                    <i class="icon-code type"></i>
                                    2-9 使用&lt;br&gt;标签分行显示文本
                                    
                                                                        <button class="r moco-btn moco-btn-red preview-btn">开始学习</button>
                                                                        
                                </a>
                                                        <!-- 未登录时 -->
                            <!-- <a target="_blank" href="/video/1430" class="J-media-item studyvideo">1-1 Java简介 (05:49)
                                <button class="r moco-btn moco-btn-blue preview-btn">预览</button>
                            </a> -->
                        </li>
                                                <li data-media-id="99">
                                                            <a href='/code/99' class="J-media-item">
                                    <i class="icon-code type"></i>
                                    2-10 为你的网页中添加一些空格
                                    
                                                                        <button class="r moco-btn moco-btn-red preview-btn">开始学习</button>
                                                                        
                                </a>
                                                        <!-- 未登录时 -->
                            <!-- <a target="_blank" href="/video/1430" class="J-media-item studyvideo">1-1 Java简介 (05:49)
                                <button class="r moco-btn moco-btn-blue preview-btn">预览</button>
                            </a> -->
                        </li>
                                                <li data-media-id="100">
                                                            <a href='/code/100' class="J-media-item">
                                    <i class="icon-code type"></i>
                                    2-11 认识&lt;hr&gt;标签，添加水平横线
                                    
                                                                        <button class="r moco-btn moco-btn-red preview-btn">开始学习</button>
                                                                        
                                </a>
                                                        <!-- 未登录时 -->
                            <!-- <a target="_blank" href="/video/1430" class="J-media-item studyvideo">1-1 Java简介 (05:49)
                                <button class="r moco-btn moco-btn-blue preview-btn">预览</button>
                            </a> -->
                        </li>
                                                <li data-media-id="101">
                                                            <a href='/code/101' class="J-media-item">
                                    <i class="icon-code type"></i>
                                    2-12 &lt;address&gt;标签，为网页加入地址信息
                                    
                                                                        <button class="r moco-btn moco-btn-red preview-btn">开始学习</button>
                                                                        
                                </a>
                                                        <!-- 未登录时 -->
                            <!-- <a target="_blank" href="/video/1430" class="J-media-item studyvideo">1-1 Java简介 (05:49)
                                <button class="r moco-btn moco-btn-blue preview-btn">预览</button>
                            </a> -->
                        </li>
                                                <li data-media-id="144">
                                                            <a href='/code/144' class="J-media-item">
                                    <i class="icon-code type"></i>
                                    2-13 想加入一行代码吗？使用&lt;code&gt;标签
                                    
                                                                        <button class="r moco-btn moco-btn-red preview-btn">开始学习</button>
                                                                        
                                </a>
                                                        <!-- 未登录时 -->
                            <!-- <a target="_blank" href="/video/1430" class="J-media-item studyvideo">1-1 Java简介 (05:49)
                                <button class="r moco-btn moco-btn-blue preview-btn">预览</button>
                            </a> -->
                        </li>
                                                <li data-media-id="145">
                                                            <a href='/code/145' class="J-media-item">
                                    <i class="icon-code type"></i>
                                    2-14 使用&lt;pre&gt;标签为你的网页加入大段代码
                                    
                                                                        <button class="r moco-btn moco-btn-red preview-btn">开始学习</button>
                                                                        
                                </a>
                                                        <!-- 未登录时 -->
                            <!-- <a target="_blank" href="/video/1430" class="J-media-item studyvideo">1-1 Java简介 (05:49)
                                <button class="r moco-btn moco-btn-blue preview-btn">预览</button>
                            </a> -->
                        </li>
                                            </ul>
                                        <!-- 章节小节 end -->
                </div>
                            <div class="chapter ">
                    <!-- 章节标题 -->
                    <h3>
                        
                        <span class="icon-drop_down js-close"></span>
                        <strong>
                            <i class="icon-chapter"></i>
                            第3章 认识标签(第二部分)
                            <div class="icon-info chapter-info">
                                <i class="icon-drop_up triangle">
                                    <div class="chapter-introubox">
                                        <div class="chapter-content">本章节主要讲解列表、div及table标签使用，学完本章，我们可以在网页上展示一些信息列表及表格数据，使网页上的信息更加丰富</div>
                                    </div>
                                </i>
                            </div>
                        </strong>
                        
                    </h3>
                    <!-- 章节标题 end -->
                    <!-- 章节小节 -->
                                        <ul class="video">
                                                <li data-media-id="288">
                                                            <a href='/code/288' class="J-media-item">
                                    <i class="icon-code type"></i>
                                    3-1 使用ul，添加新闻信息列表
                                    
                                                                        <button class="r moco-btn moco-btn-red preview-btn">开始学习</button>
                                                                        
                                </a>
                                                        <!-- 未登录时 -->
                            <!-- <a target="_blank" href="/video/1430" class="J-media-item studyvideo">1-1 Java简介 (05:49)
                                <button class="r moco-btn moco-btn-blue preview-btn">预览</button>
                            </a> -->
                        </li>
                                                <li data-media-id="289">
                                                            <a href='/code/289' class="J-media-item">
                                    <i class="icon-code type"></i>
                                    3-2 使用ol，添加图书销售排行榜
                                    
                                                                        <button class="r moco-btn moco-btn-red preview-btn">开始学习</button>
                                                                        
                                </a>
                                                        <!-- 未登录时 -->
                            <!-- <a target="_blank" href="/video/1430" class="J-media-item studyvideo">1-1 Java简介 (05:49)
                                <button class="r moco-btn moco-btn-blue preview-btn">预览</button>
                            </a> -->
                        </li>
                                                <li data-media-id="290">
                                                            <a href='/code/290' class="J-media-item">
                                    <i class="icon-code type"></i>
                                    3-3 认识div在排版中的作用
                                    
                                                                        <button class="r moco-btn moco-btn-red preview-btn">开始学习</button>
                                                                        
                                </a>
                                                        <!-- 未登录时 -->
                            <!-- <a target="_blank" href="/video/1430" class="J-media-item studyvideo">1-1 Java简介 (05:49)
                                <button class="r moco-btn moco-btn-blue preview-btn">预览</button>
                            </a> -->
                        </li>
                                                <li data-media-id="291">
                                                            <a href='/code/291' class="J-media-item">
                                    <i class="icon-code type"></i>
                                    3-4 给div命名，使逻辑更加清晰
                                    
                                                                        <button class="r moco-btn moco-btn-red preview-btn">开始学习</button>
                                                                        
                                </a>
                                                        <!-- 未登录时 -->
                            <!-- <a target="_blank" href="/video/1430" class="J-media-item studyvideo">1-1 Java简介 (05:49)
                                <button class="r moco-btn moco-btn-blue preview-btn">预览</button>
                            </a> -->
                        </li>
                                                <li data-media-id="292">
                                                            <a href='/code/292' class="J-media-item">
                                    <i class="icon-code type"></i>
                                    3-5 table标签，认识网页上的表格
                                    
                                                                        <button class="r moco-btn moco-btn-red preview-btn">开始学习</button>
                                                                        
                                </a>
                                                        <!-- 未登录时 -->
                            <!-- <a target="_blank" href="/video/1430" class="J-media-item studyvideo">1-1 Java简介 (05:49)
                                <button class="r moco-btn moco-btn-blue preview-btn">预览</button>
                            </a> -->
                        </li>
                                                <li data-media-id="293">
                                                            <a href='/code/293' class="J-media-item">
                                    <i class="icon-code type"></i>
                                    3-6 用css样式，为表格加入边框
                                    
                                                                        <button class="r moco-btn moco-btn-red preview-btn">开始学习</button>
                                                                        
                                </a>
                                                        <!-- 未登录时 -->
                            <!-- <a target="_blank" href="/video/1430" class="J-media-item studyvideo">1-1 Java简介 (05:49)
                                <button class="r moco-btn moco-btn-blue preview-btn">预览</button>
                            </a> -->
                        </li>
                                                <li data-media-id="294">
                                                            <a href='/code/294' class="J-media-item">
                                    <i class="icon-code type"></i>
                                    3-7 caption标签，为表格添加标题和摘要
                                    
                                                                        <button class="r moco-btn moco-btn-red preview-btn">开始学习</button>
                                                                        
                                </a>
                                                        <!-- 未登录时 -->
                            <!-- <a target="_blank" href="/video/1430" class="J-media-item studyvideo">1-1 Java简介 (05:49)
                                <button class="r moco-btn moco-btn-blue preview-btn">预览</button>
                            </a> -->
                        </li>
                                            </ul>
                                        <!-- 章节小节 end -->
                </div>
                            <div class="chapter ">
                    <!-- 章节标题 -->
                    <h3>
                        
                        <span class="icon-drop_down js-close"></span>
                        <strong>
                            <i class="icon-chapter"></i>
                            第4章 认识标签(第三部分)
                            <div class="icon-info chapter-info">
                                <i class="icon-drop_up triangle">
                                    <div class="chapter-introubox">
                                        <div class="chapter-content">本章节主要讲解超链接标签、链接地址及图片标签，学习完这一章节可以把分散的单独的网页用链接&lt;a&gt;标签有效的组织起来，达到网页之间可以相互跳转的作用。</div>
                                    </div>
                                </i>
                            </div>
                        </strong>
                        
                    </h3>
                    <!-- 章节标题 end -->
                    <!-- 章节小节 -->
                                        <ul class="video">
                                                <li data-media-id="315">
                                                            <a href='/code/315' class="J-media-item">
                                    <i class="icon-code type"></i>
                                    4-1 使用&lt;a&gt;标签，链接到另一个页面
                                    
                                                                        <button class="r moco-btn moco-btn-red preview-btn">开始学习</button>
                                                                        
                                </a>
                                                        <!-- 未登录时 -->
                            <!-- <a target="_blank" href="/video/1430" class="J-media-item studyvideo">1-1 Java简介 (05:49)
                                <button class="r moco-btn moco-btn-blue preview-btn">预览</button>
                            </a> -->
                        </li>
                                                <li data-media-id="316">
                                                            <a href='/code/316' class="J-media-item">
                                    <i class="icon-code type"></i>
                                    4-2 在新建浏览器窗口中打开链接
                                    
                                                                        <button class="r moco-btn moco-btn-red preview-btn">开始学习</button>
                                                                        
                                </a>
                                                        <!-- 未登录时 -->
                            <!-- <a target="_blank" href="/video/1430" class="J-media-item studyvideo">1-1 Java简介 (05:49)
                                <button class="r moco-btn moco-btn-blue preview-btn">预览</button>
                            </a> -->
                        </li>
                                                <li data-media-id="317">
                                                            <a href='/code/317' class="J-media-item">
                                    <i class="icon-code type"></i>
                                    4-3 使用mailto在网页中链接Email地址
                                    
                                                                        <button class="r moco-btn moco-btn-red preview-btn">开始学习</button>
                                                                        
                                </a>
                                                        <!-- 未登录时 -->
                            <!-- <a target="_blank" href="/video/1430" class="J-media-item studyvideo">1-1 Java简介 (05:49)
                                <button class="r moco-btn moco-btn-blue preview-btn">预览</button>
                            </a> -->
                        </li>
                                                <li data-media-id="318">
                                                            <a href='/code/318' class="J-media-item">
                                    <i class="icon-code type"></i>
                                    4-4 认识&lt;img&gt;标签，为网页插入图片
                                    
                                                                        <button class="r moco-btn moco-btn-red preview-btn">开始学习</button>
                                                                        
                                </a>
                                                        <!-- 未登录时 -->
                            <!-- <a target="_blank" href="/video/1430" class="J-media-item studyvideo">1-1 Java简介 (05:49)
                                <button class="r moco-btn moco-btn-blue preview-btn">预览</button>
                            </a> -->
                        </li>
                                            </ul>
                                        <!-- 章节小节 end -->
                </div>
                            <div class="chapter ">
                    <!-- 章节标题 -->
                    <h3>
                        
                        <span class="icon-drop_down js-close"></span>
                        <strong>
                            <i class="icon-chapter"></i>
                            第5章 与浏览者交互，表单标签
                            <div class="icon-info chapter-info">
                                <i class="icon-drop_up triangle">
                                    <div class="chapter-introubox">
                                        <div class="chapter-content">我们每天都在网上冲浪，如果没有表单，人们就无法输入自己的个人信息来买东西，本章节主要从表单的作用、表单元素讲起，学习完本章，可以制出简单的用户登陆、注册页面。</div>
                                    </div>
                                </i>
                            </div>
                        </strong>
                        
                    </h3>
                    <!-- 章节标题 end -->
                    <!-- 章节小节 -->
                                        <ul class="video">
                                                <li data-media-id="415">
                                                            <a href='/code/415' class="J-media-item">
                                    <i class="icon-code type"></i>
                                    5-1 使用表单标签，与用户交互
                                    
                                                                        <button class="r moco-btn moco-btn-red preview-btn">开始学习</button>
                                                                        
                                </a>
                                                        <!-- 未登录时 -->
                            <!-- <a target="_blank" href="/video/1430" class="J-media-item studyvideo">1-1 Java简介 (05:49)
                                <button class="r moco-btn moco-btn-blue preview-btn">预览</button>
                            </a> -->
                        </li>
                                                <li data-media-id="479">
                                                            <a href='/code/479' class="J-media-item">
                                    <i class="icon-code type"></i>
                                    5-2 文本输入框、密码输入框
                                    
                                                                        <button class="r moco-btn moco-btn-red preview-btn">开始学习</button>
                                                                        
                                </a>
                                                        <!-- 未登录时 -->
                            <!-- <a target="_blank" href="/video/1430" class="J-media-item studyvideo">1-1 Java简介 (05:49)
                                <button class="r moco-btn moco-btn-blue preview-btn">预览</button>
                            </a> -->
                        </li>
                                                <li data-media-id="489">
                                                            <a href='/code/489' class="J-media-item">
                                    <i class="icon-code type"></i>
                                    5-3 文本域，支持多行文本输入
                                    
                                                                        <button class="r moco-btn moco-btn-red preview-btn">开始学习</button>
                                                                        
                                </a>
                                                        <!-- 未登录时 -->
                            <!-- <a target="_blank" href="/video/1430" class="J-media-item studyvideo">1-1 Java简介 (05:49)
                                <button class="r moco-btn moco-btn-blue preview-btn">预览</button>
                            </a> -->
                        </li>
                                                <li data-media-id="497">
                                                            <a href='/code/497' class="J-media-item">
                                    <i class="icon-code type"></i>
                                    5-4 使用单选框、复选框，让用户选择
                                    
                                                                        <button class="r moco-btn moco-btn-red preview-btn">开始学习</button>
                                                                        
                                </a>
                                                        <!-- 未登录时 -->
                            <!-- <a target="_blank" href="/video/1430" class="J-media-item studyvideo">1-1 Java简介 (05:49)
                                <button class="r moco-btn moco-btn-blue preview-btn">预览</button>
                            </a> -->
                        </li>
                                                <li data-media-id="498">
                                                            <a href='/code/498' class="J-media-item">
                                    <i class="icon-code type"></i>
                                    5-5 使用下拉列表框，节省空间
                                    
                                                                        <button class="r moco-btn moco-btn-red preview-btn">开始学习</button>
                                                                        
                                </a>
                                                        <!-- 未登录时 -->
                            <!-- <a target="_blank" href="/video/1430" class="J-media-item studyvideo">1-1 Java简介 (05:49)
                                <button class="r moco-btn moco-btn-blue preview-btn">预览</button>
                            </a> -->
                        </li>
                                                <li data-media-id="500">
                                                            <a href='/code/500' class="J-media-item">
                                    <i class="icon-code type"></i>
                                    5-6 使用下拉列表框进行多选
                                    
                                                                        <button class="r moco-btn moco-btn-red preview-btn">开始学习</button>
                                                                        
                                </a>
                                                        <!-- 未登录时 -->
                            <!-- <a target="_blank" href="/video/1430" class="J-media-item studyvideo">1-1 Java简介 (05:49)
                                <button class="r moco-btn moco-btn-blue preview-btn">预览</button>
                            </a> -->
                        </li>
                                                <li data-media-id="501">
                                                            <a href='/code/501' class="J-media-item">
                                    <i class="icon-code type"></i>
                                    5-7 使用提交按钮，提交数据
                                    
                                                                        <button class="r moco-btn moco-btn-red preview-btn">开始学习</button>
                                                                        
                                </a>
                                                        <!-- 未登录时 -->
                            <!-- <a target="_blank" href="/video/1430" class="J-media-item studyvideo">1-1 Java简介 (05:49)
                                <button class="r moco-btn moco-btn-blue preview-btn">预览</button>
                            </a> -->
                        </li>
                                                <li data-media-id="520">
                                                            <a href='/code/520' class="J-media-item">
                                    <i class="icon-code type"></i>
                                    5-8 使用重置按钮，重置表单信息
                                    
                                                                        <button class="r moco-btn moco-btn-red preview-btn">开始学习</button>
                                                                        
                                </a>
                                                        <!-- 未登录时 -->
                            <!-- <a target="_blank" href="/video/1430" class="J-media-item studyvideo">1-1 Java简介 (05:49)
                                <button class="r moco-btn moco-btn-blue preview-btn">预览</button>
                            </a> -->
                        </li>
                                                <li data-media-id="3319">
                                                            <a href='/code/3319' class="J-media-item">
                                    <i class="icon-code type"></i>
                                    5-9 form表单中的label标签
                                    
                                                                        <button class="r moco-btn moco-btn-red preview-btn">开始学习</button>
                                                                        
                                </a>
                                                        <!-- 未登录时 -->
                            <!-- <a target="_blank" href="/video/1430" class="J-media-item studyvideo">1-1 Java简介 (05:49)
                                <button class="r moco-btn moco-btn-blue preview-btn">预览</button>
                            </a> -->
                        </li>
                                            </ul>
                                        <!-- 章节小节 end -->
                </div>
                            <div class="chapter ">
                    <!-- 章节标题 -->
                    <h3>
                        
                        <span class="icon-drop_down js-close"></span>
                        <strong>
                            <i class="icon-chapter"></i>
                            第6章 开始学习CSS，为网页添加样式
                            <div class="icon-info chapter-info">
                                <i class="icon-drop_up triangle">
                                    <div class="chapter-introubox">
                                        <div class="chapter-content">CSS是一个很神奇的东西，设计者可以通过修改样式表的定义而使网页呈现出完全不同的外观。本章就开始带领大家来学习CSS样式：先来认识CSS样式、了解CSS样式的优势、最后讲解CSS代码语法和CSS注释代码。</div>
                                    </div>
                                </i>
                            </div>
                        </strong>
                        
                    </h3>
                    <!-- 章节标题 end -->
                    <!-- 章节小节 -->
                                        <ul class="video">
                                                <li data-media-id="609">
                                                            <a href='/code/609' class="J-media-item">
                                    <i class="icon-code type"></i>
                                    6-1 认识CSS样式
                                    
                                                                        <button class="r moco-btn moco-btn-red preview-btn">开始学习</button>
                                                                        
                                </a>
                                                        <!-- 未登录时 -->
                            <!-- <a target="_blank" href="/video/1430" class="J-media-item studyvideo">1-1 Java简介 (05:49)
                                <button class="r moco-btn moco-btn-blue preview-btn">预览</button>
                            </a> -->
                        </li>
                                                <li data-media-id="610">
                                                            <a href='/code/610' class="J-media-item">
                                    <i class="icon-code type"></i>
                                    6-2 CSS样式的优势
                                    
                                                                        <button class="r moco-btn moco-btn-red preview-btn">开始学习</button>
                                                                        
                                </a>
                                                        <!-- 未登录时 -->
                            <!-- <a target="_blank" href="/video/1430" class="J-media-item studyvideo">1-1 Java简介 (05:49)
                                <button class="r moco-btn moco-btn-blue preview-btn">预览</button>
                            </a> -->
                        </li>
                                                <li data-media-id="611">
                                                            <a href='/code/611' class="J-media-item">
                                    <i class="icon-code type"></i>
                                    6-3 CSS代码语法
                                    
                                                                        <button class="r moco-btn moco-btn-red preview-btn">开始学习</button>
                                                                        
                                </a>
                                                        <!-- 未登录时 -->
                            <!-- <a target="_blank" href="/video/1430" class="J-media-item studyvideo">1-1 Java简介 (05:49)
                                <button class="r moco-btn moco-btn-blue preview-btn">预览</button>
                            </a> -->
                        </li>
                                                <li data-media-id="612">
                                                            <a href='/code/612' class="J-media-item">
                                    <i class="icon-code type"></i>
                                    6-4 CSS注释代码
                                    
                                                                        <button class="r moco-btn moco-btn-red preview-btn">开始学习</button>
                                                                        
                                </a>
                                                        <!-- 未登录时 -->
                            <!-- <a target="_blank" href="/video/1430" class="J-media-item studyvideo">1-1 Java简介 (05:49)
                                <button class="r moco-btn moco-btn-blue preview-btn">预览</button>
                            </a> -->
                        </li>
                                            </ul>
                                        <!-- 章节小节 end -->
                </div>
                            <div class="chapter ">
                    <!-- 章节标题 -->
                    <h3>
                        
                        <span class="icon-drop_down js-close"></span>
                        <strong>
                            <i class="icon-chapter"></i>
                            第7章 CSS样式基本知识
                            <div class="icon-info chapter-info">
                                <i class="icon-drop_up triangle">
                                    <div class="chapter-introubox">
                                        <div class="chapter-content">这一章节主要讲解与CSS样式相关的基础知识：CSS样式的位置及相关的优先级，为后面的CSS样式具体学习打下基础。</div>
                                    </div>
                                </i>
                            </div>
                        </strong>
                        
                    </h3>
                    <!-- 章节标题 end -->
                    <!-- 章节小节 -->
                                        <ul class="video">
                                                <li data-media-id="622">
                                                            <a href='/code/622' class="J-media-item">
                                    <i class="icon-code type"></i>
                                    7-1 内联式css样式，直接写在现有的HTML标签中
                                    
                                                                        <button class="r moco-btn moco-btn-red preview-btn">开始学习</button>
                                                                        
                                </a>
                                                        <!-- 未登录时 -->
                            <!-- <a target="_blank" href="/video/1430" class="J-media-item studyvideo">1-1 Java简介 (05:49)
                                <button class="r moco-btn moco-btn-blue preview-btn">预览</button>
                            </a> -->
                        </li>
                                                <li data-media-id="623">
                                                            <a href='/code/623' class="J-media-item">
                                    <i class="icon-code type"></i>
                                    7-2 嵌入式css样式，写在当前的文件中
                                    
                                                                        <button class="r moco-btn moco-btn-red preview-btn">开始学习</button>
                                                                        
                                </a>
                                                        <!-- 未登录时 -->
                            <!-- <a target="_blank" href="/video/1430" class="J-media-item studyvideo">1-1 Java简介 (05:49)
                                <button class="r moco-btn moco-btn-blue preview-btn">预览</button>
                            </a> -->
                        </li>
                                                <li data-media-id="624">
                                                            <a href='/code/624' class="J-media-item">
                                    <i class="icon-code type"></i>
                                    7-3 外部式css样式，写在单独的一个文件中
                                    
                                                                        <button class="r moco-btn moco-btn-red preview-btn">开始学习</button>
                                                                        
                                </a>
                                                        <!-- 未登录时 -->
                            <!-- <a target="_blank" href="/video/1430" class="J-media-item studyvideo">1-1 Java简介 (05:49)
                                <button class="r moco-btn moco-btn-blue preview-btn">预览</button>
                            </a> -->
                        </li>
                                                <li data-media-id="628">
                                                            <a href='/code/628' class="J-media-item">
                                    <i class="icon-code type"></i>
                                    7-4 三种方法的优先级
                                    
                                                                        <button class="r moco-btn moco-btn-red preview-btn">开始学习</button>
                                                                        
                                </a>
                                                        <!-- 未登录时 -->
                            <!-- <a target="_blank" href="/video/1430" class="J-media-item studyvideo">1-1 Java简介 (05:49)
                                <button class="r moco-btn moco-btn-blue preview-btn">预览</button>
                            </a> -->
                        </li>
                                            </ul>
                                        <!-- 章节小节 end -->
                </div>
                            <div class="chapter ">
                    <!-- 章节标题 -->
                    <h3>
                        
                        <span class="icon-drop_down js-close"></span>
                        <strong>
                            <i class="icon-chapter"></i>
                            第8章 CSS选择器
                            <div class="icon-info chapter-info">
                                <i class="icon-drop_up triangle">
                                    <div class="chapter-introubox">
                                        <div class="chapter-content">本章主要介绍CSS的选择器，通过学习本章，我们能对元素进行样式的设置</div>
                                    </div>
                                </i>
                            </div>
                        </strong>
                        
                    </h3>
                    <!-- 章节标题 end -->
                    <!-- 章节小节 -->
                                        <ul class="video">
                                                <li data-media-id="2022">
                                                            <a href='/code/2022' class="J-media-item">
                                    <i class="icon-code type"></i>
                                    8-1 什么是选择器？
                                    
                                                                        <button class="r moco-btn moco-btn-red preview-btn">开始学习</button>
                                                                        
                                </a>
                                                        <!-- 未登录时 -->
                            <!-- <a target="_blank" href="/video/1430" class="J-media-item studyvideo">1-1 Java简介 (05:49)
                                <button class="r moco-btn moco-btn-blue preview-btn">预览</button>
                            </a> -->
                        </li>
                                                <li data-media-id="1574">
                                                            <a href='/code/1574' class="J-media-item">
                                    <i class="icon-code type"></i>
                                    8-2 标签选择器
                                    
                                                                        <button class="r moco-btn moco-btn-red preview-btn">开始学习</button>
                                                                        
                                </a>
                                                        <!-- 未登录时 -->
                            <!-- <a target="_blank" href="/video/1430" class="J-media-item studyvideo">1-1 Java简介 (05:49)
                                <button class="r moco-btn moco-btn-blue preview-btn">预览</button>
                            </a> -->
                        </li>
                                                <li data-media-id="1576">
                                                            <a href='/code/1576' class="J-media-item">
                                    <i class="icon-code type"></i>
                                    8-3 类选择器
                                    
                                                                        <button class="r moco-btn moco-btn-red preview-btn">开始学习</button>
                                                                        
                                </a>
                                                        <!-- 未登录时 -->
                            <!-- <a target="_blank" href="/video/1430" class="J-media-item studyvideo">1-1 Java简介 (05:49)
                                <button class="r moco-btn moco-btn-blue preview-btn">预览</button>
                            </a> -->
                        </li>
                                                <li data-media-id="1584">
                                                            <a href='/code/1584' class="J-media-item">
                                    <i class="icon-code type"></i>
                                    8-4 ID选择器
                                    
                                                                        <button class="r moco-btn moco-btn-red preview-btn">开始学习</button>
                                                                        
                                </a>
                                                        <!-- 未登录时 -->
                            <!-- <a target="_blank" href="/video/1430" class="J-media-item studyvideo">1-1 Java简介 (05:49)
                                <button class="r moco-btn moco-btn-blue preview-btn">预览</button>
                            </a> -->
                        </li>
                                                <li data-media-id="1585">
                                                            <a href='/code/1585' class="J-media-item">
                                    <i class="icon-code type"></i>
                                    8-5 类和ID选择器的区别
                                    
                                                                        <button class="r moco-btn moco-btn-red preview-btn">开始学习</button>
                                                                        
                                </a>
                                                        <!-- 未登录时 -->
                            <!-- <a target="_blank" href="/video/1430" class="J-media-item studyvideo">1-1 Java简介 (05:49)
                                <button class="r moco-btn moco-btn-blue preview-btn">预览</button>
                            </a> -->
                        </li>
                                                <li data-media-id="2023">
                                                            <a href='/code/2023' class="J-media-item">
                                    <i class="icon-code type"></i>
                                    8-6 子选择器
                                    
                                                                        <button class="r moco-btn moco-btn-red preview-btn">开始学习</button>
                                                                        
                                </a>
                                                        <!-- 未登录时 -->
                            <!-- <a target="_blank" href="/video/1430" class="J-media-item studyvideo">1-1 Java简介 (05:49)
                                <button class="r moco-btn moco-btn-blue preview-btn">预览</button>
                            </a> -->
                        </li>
                                                <li data-media-id="2024">
                                                            <a href='/code/2024' class="J-media-item">
                                    <i class="icon-code type"></i>
                                    8-7 包含(后代)选择器
                                    
                                                                        <button class="r moco-btn moco-btn-red preview-btn">开始学习</button>
                                                                        
                                </a>
                                                        <!-- 未登录时 -->
                            <!-- <a target="_blank" href="/video/1430" class="J-media-item studyvideo">1-1 Java简介 (05:49)
                                <button class="r moco-btn moco-btn-blue preview-btn">预览</button>
                            </a> -->
                        </li>
                                                <li data-media-id="2025">
                                                            <a href='/code/2025' class="J-media-item">
                                    <i class="icon-code type"></i>
                                    8-8 通用选择器
                                    
                                                                        <button class="r moco-btn moco-btn-red preview-btn">开始学习</button>
                                                                        
                                </a>
                                                        <!-- 未登录时 -->
                            <!-- <a target="_blank" href="/video/1430" class="J-media-item studyvideo">1-1 Java简介 (05:49)
                                <button class="r moco-btn moco-btn-blue preview-btn">预览</button>
                            </a> -->
                        </li>
                                                <li data-media-id="2036">
                                                            <a href='/code/2036' class="J-media-item">
                                    <i class="icon-code type"></i>
                                    8-9 伪类选择符
                                    
                                                                        <button class="r moco-btn moco-btn-red preview-btn">开始学习</button>
                                                                        
                                </a>
                                                        <!-- 未登录时 -->
                            <!-- <a target="_blank" href="/video/1430" class="J-media-item studyvideo">1-1 Java简介 (05:49)
                                <button class="r moco-btn moco-btn-blue preview-btn">预览</button>
                            </a> -->
                        </li>
                                                <li data-media-id="2037">
                                                            <a href='/code/2037' class="J-media-item">
                                    <i class="icon-code type"></i>
                                    8-10 分组选择符
                                    
                                                                        <button class="r moco-btn moco-btn-red preview-btn">开始学习</button>
                                                                        
                                </a>
                                                        <!-- 未登录时 -->
                            <!-- <a target="_blank" href="/video/1430" class="J-media-item studyvideo">1-1 Java简介 (05:49)
                                <button class="r moco-btn moco-btn-blue preview-btn">预览</button>
                            </a> -->
                        </li>
                                            </ul>
                                        <!-- 章节小节 end -->
                </div>
                            <div class="chapter ">
                    <!-- 章节标题 -->
                    <h3>
                        
                        <span class="icon-drop_down js-close"></span>
                        <strong>
                            <i class="icon-chapter"></i>
                            第9章 CSS的继承、层叠和特殊性
                            <div class="icon-info chapter-info">
                                <i class="icon-drop_up triangle">
                                    <div class="chapter-introubox">
                                        <div class="chapter-content">CSS中有一些概念是需要深刻理解的，此节开始将介绍CSS中的一些非常重要的概念包括CSS的继承、层叠和特殊性。</div>
                                    </div>
                                </i>
                            </div>
                        </strong>
                        
                    </h3>
                    <!-- 章节标题 end -->
                    <!-- 章节小节 -->
                                        <ul class="video">
                                                <li data-media-id="2038">
                                                            <a href='/code/2038' class="J-media-item">
                                    <i class="icon-code type"></i>
                                    9-1 继承
                                    
                                                                        <button class="r moco-btn moco-btn-red preview-btn">开始学习</button>
                                                                        
                                </a>
                                                        <!-- 未登录时 -->
                            <!-- <a target="_blank" href="/video/1430" class="J-media-item studyvideo">1-1 Java简介 (05:49)
                                <button class="r moco-btn moco-btn-blue preview-btn">预览</button>
                            </a> -->
                        </li>
                                                <li data-media-id="2039">
                                                            <a href='/code/2039' class="J-media-item">
                                    <i class="icon-code type"></i>
                                    9-2 特殊性
                                    
                                                                        <button class="r moco-btn moco-btn-red preview-btn">开始学习</button>
                                                                        
                                </a>
                                                        <!-- 未登录时 -->
                            <!-- <a target="_blank" href="/video/1430" class="J-media-item studyvideo">1-1 Java简介 (05:49)
                                <button class="r moco-btn moco-btn-blue preview-btn">预览</button>
                            </a> -->
                        </li>
                                                <li data-media-id="2040">
                                                            <a href='/code/2040' class="J-media-item">
                                    <i class="icon-code type"></i>
                                    9-3 层叠
                                    
                                                                        <button class="r moco-btn moco-btn-red preview-btn">开始学习</button>
                                                                        
                                </a>
                                                        <!-- 未登录时 -->
                            <!-- <a target="_blank" href="/video/1430" class="J-media-item studyvideo">1-1 Java简介 (05:49)
                                <button class="r moco-btn moco-btn-blue preview-btn">预览</button>
                            </a> -->
                        </li>
                                                <li data-media-id="2042">
                                                            <a href='/code/2042' class="J-media-item">
                                    <i class="icon-code type"></i>
                                    9-4 重要性
                                    
                                                                        <button class="r moco-btn moco-btn-red preview-btn">开始学习</button>
                                                                        
                                </a>
                                                        <!-- 未登录时 -->
                            <!-- <a target="_blank" href="/video/1430" class="J-media-item studyvideo">1-1 Java简介 (05:49)
                                <button class="r moco-btn moco-btn-blue preview-btn">预览</button>
                            </a> -->
                        </li>
                                            </ul>
                                        <!-- 章节小节 end -->
                </div>
                            <div class="chapter ">
                    <!-- 章节标题 -->
                    <h3>
                        
                        <span class="icon-drop_down js-close"></span>
                        <strong>
                            <i class="icon-chapter"></i>
                            第10章 CSS格式化排版
                            <div class="icon-info chapter-info">
                                <i class="icon-drop_up triangle">
                                    <div class="chapter-introubox">
                                        <div class="chapter-content">本章将详细介绍网页排版中主要格式化要素，帮助读者把CSS技术与网页编排紧密结合在一起，实现网页实用性与欣赏性相结合，实现出设计效果。</div>
                                    </div>
                                </i>
                            </div>
                        </strong>
                        
                    </h3>
                    <!-- 章节标题 end -->
                    <!-- 章节小节 -->
                                        <ul class="video">
                                                <li data-media-id="2076">
                                                            <a href='/code/2076' class="J-media-item">
                                    <i class="icon-code type"></i>
                                    10-1 文字排版--字体
                                    
                                                                        <button class="r moco-btn moco-btn-red preview-btn">开始学习</button>
                                                                        
                                </a>
                                                        <!-- 未登录时 -->
                            <!-- <a target="_blank" href="/video/1430" class="J-media-item studyvideo">1-1 Java简介 (05:49)
                                <button class="r moco-btn moco-btn-blue preview-btn">预览</button>
                            </a> -->
                        </li>
                                                <li data-media-id="2077">
                                                            <a href='/code/2077' class="J-media-item">
                                    <i class="icon-code type"></i>
                                    10-2 文字排版--字号、颜色
                                    
                                                                        <button class="r moco-btn moco-btn-red preview-btn">开始学习</button>
                                                                        
                                </a>
                                                        <!-- 未登录时 -->
                            <!-- <a target="_blank" href="/video/1430" class="J-media-item studyvideo">1-1 Java简介 (05:49)
                                <button class="r moco-btn moco-btn-blue preview-btn">预览</button>
                            </a> -->
                        </li>
                                                <li data-media-id="2078">
                                                            <a href='/code/2078' class="J-media-item">
                                    <i class="icon-code type"></i>
                                    10-3 文字排版--粗体
                                    
                                                                        <button class="r moco-btn moco-btn-red preview-btn">开始学习</button>
                                                                        
                                </a>
                                                        <!-- 未登录时 -->
                            <!-- <a target="_blank" href="/video/1430" class="J-media-item studyvideo">1-1 Java简介 (05:49)
                                <button class="r moco-btn moco-btn-blue preview-btn">预览</button>
                            </a> -->
                        </li>
                                                <li data-media-id="2079">
                                                            <a href='/code/2079' class="J-media-item">
                                    <i class="icon-code type"></i>
                                    10-4 文字排版--斜体
                                    
                                                                        <button class="r moco-btn moco-btn-red preview-btn">开始学习</button>
                                                                        
                                </a>
                                                        <!-- 未登录时 -->
                            <!-- <a target="_blank" href="/video/1430" class="J-media-item studyvideo">1-1 Java简介 (05:49)
                                <button class="r moco-btn moco-btn-blue preview-btn">预览</button>
                            </a> -->
                        </li>
                                                <li data-media-id="2080">
                                                            <a href='/code/2080' class="J-media-item">
                                    <i class="icon-code type"></i>
                                    10-5 文字排版--下划线
                                    
                                                                        <button class="r moco-btn moco-btn-red preview-btn">开始学习</button>
                                                                        
                                </a>
                                                        <!-- 未登录时 -->
                            <!-- <a target="_blank" href="/video/1430" class="J-media-item studyvideo">1-1 Java简介 (05:49)
                                <button class="r moco-btn moco-btn-blue preview-btn">预览</button>
                            </a> -->
                        </li>
                                                <li data-media-id="2081">
                                                            <a href='/code/2081' class="J-media-item">
                                    <i class="icon-code type"></i>
                                    10-6 文字排版--删除线
                                    
                                                                        <button class="r moco-btn moco-btn-red preview-btn">开始学习</button>
                                                                        
                                </a>
                                                        <!-- 未登录时 -->
                            <!-- <a target="_blank" href="/video/1430" class="J-media-item studyvideo">1-1 Java简介 (05:49)
                                <button class="r moco-btn moco-btn-blue preview-btn">预览</button>
                            </a> -->
                        </li>
                                                <li data-media-id="2082">
                                                            <a href='/code/2082' class="J-media-item">
                                    <i class="icon-code type"></i>
                                    10-7 段落排版--缩进
                                    
                                                                        <button class="r moco-btn moco-btn-red preview-btn">开始学习</button>
                                                                        
                                </a>
                                                        <!-- 未登录时 -->
                            <!-- <a target="_blank" href="/video/1430" class="J-media-item studyvideo">1-1 Java简介 (05:49)
                                <button class="r moco-btn moco-btn-blue preview-btn">预览</button>
                            </a> -->
                        </li>
                                                <li data-media-id="2083">
                                                            <a href='/code/2083' class="J-media-item">
                                    <i class="icon-code type"></i>
                                    10-8 段落排版--行间距（行高）
                                    
                                                                        <button class="r moco-btn moco-btn-red preview-btn">开始学习</button>
                                                                        
                                </a>
                                                        <!-- 未登录时 -->
                            <!-- <a target="_blank" href="/video/1430" class="J-media-item studyvideo">1-1 Java简介 (05:49)
                                <button class="r moco-btn moco-btn-blue preview-btn">预览</button>
                            </a> -->
                        </li>
                                                <li data-media-id="2084">
                                                            <a href='/code/2084' class="J-media-item">
                                    <i class="icon-code type"></i>
                                    10-9 段落排版--中文字间距、字母间距
                                    
                                                                        <button class="r moco-btn moco-btn-red preview-btn">开始学习</button>
                                                                        
                                </a>
                                                        <!-- 未登录时 -->
                            <!-- <a target="_blank" href="/video/1430" class="J-media-item studyvideo">1-1 Java简介 (05:49)
                                <button class="r moco-btn moco-btn-blue preview-btn">预览</button>
                            </a> -->
                        </li>
                                                <li data-media-id="2085">
                                                            <a href='/code/2085' class="J-media-item">
                                    <i class="icon-code type"></i>
                                    10-10 段落排版--对齐
                                    
                                                                        <button class="r moco-btn moco-btn-red preview-btn">开始学习</button>
                                                                        
                                </a>
                                                        <!-- 未登录时 -->
                            <!-- <a target="_blank" href="/video/1430" class="J-media-item studyvideo">1-1 Java简介 (05:49)
                                <button class="r moco-btn moco-btn-blue preview-btn">预览</button>
                            </a> -->
                        </li>
                                            </ul>
                                        <!-- 章节小节 end -->
                </div>
                            <div class="chapter ">
                    <!-- 章节标题 -->
                    <h3>
                        
                        <span class="icon-drop_down js-close"></span>
                        <strong>
                            <i class="icon-chapter"></i>
                            第11章 CSS盒模型
                            <div class="icon-info chapter-info">
                                <i class="icon-drop_up triangle">
                                    <div class="chapter-introubox">
                                        <div class="chapter-content">盒模型是CSS布局的基石，它规定了网页元素如何显示以及元素间相互关系。本章将围绕盒模型的概念、结构、尺寸等基础知识展开研究，以便为后面的学习和日后网页设计奠定扎实的基础。</div>
                                    </div>
                                </i>
                            </div>
                        </strong>
                        
                    </h3>
                    <!-- 章节标题 end -->
                    <!-- 章节小节 -->
                                        <ul class="video">
                                                <li data-media-id="2047">
                                                            <a href='/code/2047' class="J-media-item">
                                    <i class="icon-code type"></i>
                                    11-1 元素分类
                                    
                                                                        <button class="r moco-btn moco-btn-red preview-btn">开始学习</button>
                                                                        
                                </a>
                                                        <!-- 未登录时 -->
                            <!-- <a target="_blank" href="/video/1430" class="J-media-item studyvideo">1-1 Java简介 (05:49)
                                <button class="r moco-btn moco-btn-blue preview-btn">预览</button>
                            </a> -->
                        </li>
                                                <li data-media-id="2048">
                                                            <a href='/code/2048' class="J-media-item">
                                    <i class="icon-code type"></i>
                                    11-2 元素分类--块级元素
                                    
                                                                        <button class="r moco-btn moco-btn-red preview-btn">开始学习</button>
                                                                        
                                </a>
                                                        <!-- 未登录时 -->
                            <!-- <a target="_blank" href="/video/1430" class="J-media-item studyvideo">1-1 Java简介 (05:49)
                                <button class="r moco-btn moco-btn-blue preview-btn">预览</button>
                            </a> -->
                        </li>
                                                <li data-media-id="2049">
                                                            <a href='/code/2049' class="J-media-item">
                                    <i class="icon-code type"></i>
                                    11-3 元素分类--内联元素
                                    
                                                                        <button class="r moco-btn moco-btn-red preview-btn">开始学习</button>
                                                                        
                                </a>
                                                        <!-- 未登录时 -->
                            <!-- <a target="_blank" href="/video/1430" class="J-media-item studyvideo">1-1 Java简介 (05:49)
                                <button class="r moco-btn moco-btn-blue preview-btn">预览</button>
                            </a> -->
                        </li>
                                                <li data-media-id="2050">
                                                            <a href='/code/2050' class="J-media-item">
                                    <i class="icon-code type"></i>
                                    11-4 元素分类--内联块状元素
                                    
                                                                        <button class="r moco-btn moco-btn-red preview-btn">开始学习</button>
                                                                        
                                </a>
                                                        <!-- 未登录时 -->
                            <!-- <a target="_blank" href="/video/1430" class="J-media-item studyvideo">1-1 Java简介 (05:49)
                                <button class="r moco-btn moco-btn-blue preview-btn">预览</button>
                            </a> -->
                        </li>
                                                <li data-media-id="3225">
                                                            <a href='/video/3225' class="J-media-item">
                                    <i class="icon-video type"></i>
                                    11-5 什么是盒模型 
                                                                            (02:14)
                                                                        
                                                                        <button class="r moco-btn moco-btn-red preview-btn">开始学习</button>
                                                                        
                                </a>
                                                        <!-- 未登录时 -->
                            <!-- <a target="_blank" href="/video/1430" class="J-media-item studyvideo">1-1 Java简介 (05:49)
                                <button class="r moco-btn moco-btn-blue preview-btn">预览</button>
                            </a> -->
                        </li>
                                                <li data-media-id="2052">
                                                            <a href='/code/2052' class="J-media-item">
                                    <i class="icon-code type"></i>
                                    11-6 盒模型--边框（一）
                                    
                                                                        <button class="r moco-btn moco-btn-red preview-btn">开始学习</button>
                                                                        
                                </a>
                                                        <!-- 未登录时 -->
                            <!-- <a target="_blank" href="/video/1430" class="J-media-item studyvideo">1-1 Java简介 (05:49)
                                <button class="r moco-btn moco-btn-blue preview-btn">预览</button>
                            </a> -->
                        </li>
                                                <li data-media-id="2053">
                                                            <a href='/code/2053' class="J-media-item">
                                    <i class="icon-code type"></i>
                                    11-7 盒模型--边框（二）
                                    
                                                                        <button class="r moco-btn moco-btn-red preview-btn">开始学习</button>
                                                                        
                                </a>
                                                        <!-- 未登录时 -->
                            <!-- <a target="_blank" href="/video/1430" class="J-media-item studyvideo">1-1 Java简介 (05:49)
                                <button class="r moco-btn moco-btn-blue preview-btn">预览</button>
                            </a> -->
                        </li>
                                                <li data-media-id="2054">
                                                            <a href='/code/2054' class="J-media-item">
                                    <i class="icon-code type"></i>
                                    11-8 盒模型--宽度和高度
                                    
                                                                        <button class="r moco-btn moco-btn-red preview-btn">开始学习</button>
                                                                        
                                </a>
                                                        <!-- 未登录时 -->
                            <!-- <a target="_blank" href="/video/1430" class="J-media-item studyvideo">1-1 Java简介 (05:49)
                                <button class="r moco-btn moco-btn-blue preview-btn">预览</button>
                            </a> -->
                        </li>
                                                <li data-media-id="2055">
                                                            <a href='/code/2055' class="J-media-item">
                                    <i class="icon-code type"></i>
                                    11-9 盒模型--填充
                                    
                                                                        <button class="r moco-btn moco-btn-red preview-btn">开始学习</button>
                                                                        
                                </a>
                                                        <!-- 未登录时 -->
                            <!-- <a target="_blank" href="/video/1430" class="J-media-item studyvideo">1-1 Java简介 (05:49)
                                <button class="r moco-btn moco-btn-blue preview-btn">预览</button>
                            </a> -->
                        </li>
                                                <li data-media-id="2056">
                                                            <a href='/code/2056' class="J-media-item">
                                    <i class="icon-code type"></i>
                                    11-10 盒模型--边界
                                    
                                                                        <button class="r moco-btn moco-btn-red preview-btn">开始学习</button>
                                                                        
                                </a>
                                                        <!-- 未登录时 -->
                            <!-- <a target="_blank" href="/video/1430" class="J-media-item studyvideo">1-1 Java简介 (05:49)
                                <button class="r moco-btn moco-btn-blue preview-btn">预览</button>
                            </a> -->
                        </li>
                                            </ul>
                                        <!-- 章节小节 end -->
                </div>
                            <div class="chapter ">
                    <!-- 章节标题 -->
                    <h3>
                        
                        <span class="icon-drop_down js-close"></span>
                        <strong>
                            <i class="icon-chapter"></i>
                            第12章 CSS布局模型
                            <div class="icon-info chapter-info">
                                <i class="icon-drop_up triangle">
                                    <div class="chapter-introubox">
                                        <div class="chapter-content">现在可以用所需的知识进行真正设计了，学习完本章节可以运用所学习的知识实现网页的多列布局，本章将围绕流动模型、浮动模型、层布局模型等布局技术展开研究，以便为后面制作复杂的网页打下基础。</div>
                                    </div>
                                </i>
                            </div>
                        </strong>
                        
                    </h3>
                    <!-- 章节标题 end -->
                    <!-- 章节小节 -->
                                        <ul class="video">
                                                <li data-media-id="2057">
                                                            <a href='/code/2057' class="J-media-item">
                                    <i class="icon-code type"></i>
                                    12-1 css布局模型
                                    
                                                                        <button class="r moco-btn moco-btn-red preview-btn">开始学习</button>
                                                                        
                                </a>
                                                        <!-- 未登录时 -->
                            <!-- <a target="_blank" href="/video/1430" class="J-media-item studyvideo">1-1 Java简介 (05:49)
                                <button class="r moco-btn moco-btn-blue preview-btn">预览</button>
                            </a> -->
                        </li>
                                                <li data-media-id="2058">
                                                            <a href='/code/2058' class="J-media-item">
                                    <i class="icon-code type"></i>
                                    12-2 流动模型（一）
                                    
                                                                        <button class="r moco-btn moco-btn-red preview-btn">开始学习</button>
                                                                        
                                </a>
                                                        <!-- 未登录时 -->
                            <!-- <a target="_blank" href="/video/1430" class="J-media-item studyvideo">1-1 Java简介 (05:49)
                                <button class="r moco-btn moco-btn-blue preview-btn">预览</button>
                            </a> -->
                        </li>
                                                <li data-media-id="2070">
                                                            <a href='/code/2070' class="J-media-item">
                                    <i class="icon-code type"></i>
                                    12-3 流动模型（二）
                                    
                                                                        <button class="r moco-btn moco-btn-red preview-btn">开始学习</button>
                                                                        
                                </a>
                                                        <!-- 未登录时 -->
                            <!-- <a target="_blank" href="/video/1430" class="J-media-item studyvideo">1-1 Java简介 (05:49)
                                <button class="r moco-btn moco-btn-blue preview-btn">预览</button>
                            </a> -->
                        </li>
                                                <li data-media-id="2071">
                                                            <a href='/code/2071' class="J-media-item">
                                    <i class="icon-code type"></i>
                                    12-4 浮动模型
                                    
                                                                        <button class="r moco-btn moco-btn-red preview-btn">开始学习</button>
                                                                        
                                </a>
                                                        <!-- 未登录时 -->
                            <!-- <a target="_blank" href="/video/1430" class="J-media-item studyvideo">1-1 Java简介 (05:49)
                                <button class="r moco-btn moco-btn-blue preview-btn">预览</button>
                            </a> -->
                        </li>
                                                <li data-media-id="2072">
                                                            <a href='/code/2072' class="J-media-item">
                                    <i class="icon-code type"></i>
                                    12-5 什么是层模型？
                                    
                                                                        <button class="r moco-btn moco-btn-red preview-btn">开始学习</button>
                                                                        
                                </a>
                                                        <!-- 未登录时 -->
                            <!-- <a target="_blank" href="/video/1430" class="J-media-item studyvideo">1-1 Java简介 (05:49)
                                <button class="r moco-btn moco-btn-blue preview-btn">预览</button>
                            </a> -->
                        </li>
                                                <li data-media-id="2073">
                                                            <a href='/code/2073' class="J-media-item">
                                    <i class="icon-code type"></i>
                                    12-6 层模型--绝对定位
                                    
                                                                        <button class="r moco-btn moco-btn-red preview-btn">开始学习</button>
                                                                        
                                </a>
                                                        <!-- 未登录时 -->
                            <!-- <a target="_blank" href="/video/1430" class="J-media-item studyvideo">1-1 Java简介 (05:49)
                                <button class="r moco-btn moco-btn-blue preview-btn">预览</button>
                            </a> -->
                        </li>
                                                <li data-media-id="2074">
                                                            <a href='/code/2074' class="J-media-item">
                                    <i class="icon-code type"></i>
                                    12-7 层模型--相对定位
                                    
                                                                        <button class="r moco-btn moco-btn-red preview-btn">开始学习</button>
                                                                        
                                </a>
                                                        <!-- 未登录时 -->
                            <!-- <a target="_blank" href="/video/1430" class="J-media-item studyvideo">1-1 Java简介 (05:49)
                                <button class="r moco-btn moco-btn-blue preview-btn">预览</button>
                            </a> -->
                        </li>
                                                <li data-media-id="2075">
                                                            <a href='/code/2075' class="J-media-item">
                                    <i class="icon-code type"></i>
                                    12-8 层模型--固定定位
                                    
                                                                        <button class="r moco-btn moco-btn-red preview-btn">开始学习</button>
                                                                        
                                </a>
                                                        <!-- 未登录时 -->
                            <!-- <a target="_blank" href="/video/1430" class="J-media-item studyvideo">1-1 Java简介 (05:49)
                                <button class="r moco-btn moco-btn-blue preview-btn">预览</button>
                            </a> -->
                        </li>
                                                <li data-media-id="3585">
                                                            <a href='/code/3585' class="J-media-item">
                                    <i class="icon-code type"></i>
                                    12-9 Relative与Absolute组合使用
                                    
                                                                        <button class="r moco-btn moco-btn-red preview-btn">开始学习</button>
                                                                        
                                </a>
                                                        <!-- 未登录时 -->
                            <!-- <a target="_blank" href="/video/1430" class="J-media-item studyvideo">1-1 Java简介 (05:49)
                                <button class="r moco-btn moco-btn-blue preview-btn">预览</button>
                            </a> -->
                        </li>
                                            </ul>
                                        <!-- 章节小节 end -->
                </div>
                            <div class="chapter ">
                    <!-- 章节标题 -->
                    <h3>
                        
                        <span class="icon-drop_down js-close"></span>
                        <strong>
                            <i class="icon-chapter"></i>
                            第13章 CSS代码缩写，占用更少的带宽
                            <div class="icon-info chapter-info">
                                <i class="icon-drop_up triangle">
                                    <div class="chapter-introubox">
                                        <div class="chapter-content">虽然CSS文件或者嵌入的CSS都纯文本文件，为了减少css样式代码的编写量，代码缩写是很有必要的。这样可以使用户访问你的网页的时候占用更少的带宽。</div>
                                    </div>
                                </i>
                            </div>
                        </strong>
                        
                    </h3>
                    <!-- 章节标题 end -->
                    <!-- 章节小节 -->
                                        <ul class="video">
                                                <li data-media-id="2088">
                                                            <a href='/code/2088' class="J-media-item">
                                    <i class="icon-code type"></i>
                                    13-1 盒模型代码简写
                                    
                                                                        <button class="r moco-btn moco-btn-red preview-btn">开始学习</button>
                                                                        
                                </a>
                                                        <!-- 未登录时 -->
                            <!-- <a target="_blank" href="/video/1430" class="J-media-item studyvideo">1-1 Java简介 (05:49)
                                <button class="r moco-btn moco-btn-blue preview-btn">预览</button>
                            </a> -->
                        </li>
                                                <li data-media-id="2093">
                                                            <a href='/code/2093' class="J-media-item">
                                    <i class="icon-code type"></i>
                                    13-2 颜色值缩写
                                    
                                                                        <button class="r moco-btn moco-btn-red preview-btn">开始学习</button>
                                                                        
                                </a>
                                                        <!-- 未登录时 -->
                            <!-- <a target="_blank" href="/video/1430" class="J-media-item studyvideo">1-1 Java简介 (05:49)
                                <button class="r moco-btn moco-btn-blue preview-btn">预览</button>
                            </a> -->
                        </li>
                                                <li data-media-id="2094">
                                                            <a href='/code/2094' class="J-media-item">
                                    <i class="icon-code type"></i>
                                    13-3 字体缩写
                                    
                                                                        <button class="r moco-btn moco-btn-red preview-btn">开始学习</button>
                                                                        
                                </a>
                                                        <!-- 未登录时 -->
                            <!-- <a target="_blank" href="/video/1430" class="J-media-item studyvideo">1-1 Java简介 (05:49)
                                <button class="r moco-btn moco-btn-blue preview-btn">预览</button>
                            </a> -->
                        </li>
                                            </ul>
                                        <!-- 章节小节 end -->
                </div>
                            <div class="chapter ">
                    <!-- 章节标题 -->
                    <h3>
                        
                        <span class="icon-drop_down js-close"></span>
                        <strong>
                            <i class="icon-chapter"></i>
                            第14章 单位和值
                            <div class="icon-info chapter-info">
                                <i class="icon-drop_up triangle">
                                    <div class="chapter-introubox">
                                        <div class="chapter-content">本章节对单位如颜色的单位和值等时行详细讲解。</div>
                                    </div>
                                </i>
                            </div>
                        </strong>
                        
                    </h3>
                    <!-- 章节标题 end -->
                    <!-- 章节小节 -->
                                        <ul class="video">
                                                <li data-media-id="3884">
                                                            <a href='/code/3884' class="J-media-item">
                                    <i class="icon-code type"></i>
                                    14-1 颜色值
                                    
                                                                        <button class="r moco-btn moco-btn-red preview-btn">开始学习</button>
                                                                        
                                </a>
                                                        <!-- 未登录时 -->
                            <!-- <a target="_blank" href="/video/1430" class="J-media-item studyvideo">1-1 Java简介 (05:49)
                                <button class="r moco-btn moco-btn-blue preview-btn">预览</button>
                            </a> -->
                        </li>
                                                <li data-media-id="5989">
                                                            <a href='/code/5989' class="J-media-item">
                                    <i class="icon-code type"></i>
                                    14-2 长度值
                                    
                                                                        <button class="r moco-btn moco-btn-red preview-btn">开始学习</button>
                                                                        
                                </a>
                                                        <!-- 未登录时 -->
                            <!-- <a target="_blank" href="/video/1430" class="J-media-item studyvideo">1-1 Java简介 (05:49)
                                <button class="r moco-btn moco-btn-blue preview-btn">预览</button>
                            </a> -->
                        </li>
                                            </ul>
                                        <!-- 章节小节 end -->
                </div>
                            <div class="chapter ">
                    <!-- 章节标题 -->
                    <h3>
                        
                        <span class="icon-drop_down js-close"></span>
                        <strong>
                            <i class="icon-chapter"></i>
                            第15章  css样式设置小技巧
                            <div class="icon-info chapter-info">
                                <i class="icon-drop_up triangle">
                                    <div class="chapter-introubox">
                                        <div class="chapter-content">本章节对在日常前端开发中常用到css样式设置小技巧进行了讲解。</div>
                                    </div>
                                </i>
                            </div>
                        </strong>
                        
                    </h3>
                    <!-- 章节标题 end -->
                    <!-- 章节小节 -->
                                        <ul class="video">
                                                <li data-media-id="4339">
                                                            <a href='/code/4339' class="J-media-item">
                                    <i class="icon-code type"></i>
                                    15-1 水平居中设置-行内元素
                                    
                                                                        <button class="r moco-btn moco-btn-red preview-btn">开始学习</button>
                                                                        
                                </a>
                                                        <!-- 未登录时 -->
                            <!-- <a target="_blank" href="/video/1430" class="J-media-item studyvideo">1-1 Java简介 (05:49)
                                <button class="r moco-btn moco-btn-blue preview-btn">预览</button>
                            </a> -->
                        </li>
                                                <li data-media-id="4336">
                                                            <a href='/code/4336' class="J-media-item">
                                    <i class="icon-code type"></i>
                                    15-2 水平居中设置-定宽块状元素
                                    
                                                                        <button class="r moco-btn moco-btn-red preview-btn">开始学习</button>
                                                                        
                                </a>
                                                        <!-- 未登录时 -->
                            <!-- <a target="_blank" href="/video/1430" class="J-media-item studyvideo">1-1 Java简介 (05:49)
                                <button class="r moco-btn moco-btn-blue preview-btn">预览</button>
                            </a> -->
                        </li>
                                                <li data-media-id="6363">
                                                            <a href='/code/6363' class="J-media-item">
                                    <i class="icon-code type"></i>
                                    15-3 水平居中总结-不定宽块状元素方法（一）
                                    
                                                                        <button class="r moco-btn moco-btn-red preview-btn">开始学习</button>
                                                                        
                                </a>
                                                        <!-- 未登录时 -->
                            <!-- <a target="_blank" href="/video/1430" class="J-media-item studyvideo">1-1 Java简介 (05:49)
                                <button class="r moco-btn moco-btn-blue preview-btn">预览</button>
                            </a> -->
                        </li>
                                                <li data-media-id="6364">
                                                            <a href='/code/6364' class="J-media-item">
                                    <i class="icon-code type"></i>
                                    15-4 水平居中总结-不定宽块状元素方法（二）
                                    
                                                                        <button class="r moco-btn moco-btn-red preview-btn">开始学习</button>
                                                                        
                                </a>
                                                        <!-- 未登录时 -->
                            <!-- <a target="_blank" href="/video/1430" class="J-media-item studyvideo">1-1 Java简介 (05:49)
                                <button class="r moco-btn moco-btn-blue preview-btn">预览</button>
                            </a> -->
                        </li>
                                                <li data-media-id="6365">
                                                            <a href='/code/6365' class="J-media-item">
                                    <i class="icon-code type"></i>
                                    15-5 水平居中总结-不定宽块状元素方法（三）
                                    
                                                                        <button class="r moco-btn moco-btn-red preview-btn">开始学习</button>
                                                                        
                                </a>
                                                        <!-- 未登录时 -->
                            <!-- <a target="_blank" href="/video/1430" class="J-media-item studyvideo">1-1 Java简介 (05:49)
                                <button class="r moco-btn moco-btn-blue preview-btn">预览</button>
                            </a> -->
                        </li>
                                                <li data-media-id="6368">
                                                            <a href='/code/6368' class="J-media-item">
                                    <i class="icon-code type"></i>
                                    15-6 垂直居中-父元素高度确定的单行文本
                                    
                                                                        <button class="r moco-btn moco-btn-red preview-btn">开始学习</button>
                                                                        
                                </a>
                                                        <!-- 未登录时 -->
                            <!-- <a target="_blank" href="/video/1430" class="J-media-item studyvideo">1-1 Java简介 (05:49)
                                <button class="r moco-btn moco-btn-blue preview-btn">预览</button>
                            </a> -->
                        </li>
                                                <li data-media-id="6370">
                                                            <a href='/code/6370' class="J-media-item">
                                    <i class="icon-code type"></i>
                                    15-7 垂直居中-父元素高度确定的多行文本（方法一）
                                    
                                                                        <button class="r moco-btn moco-btn-red preview-btn">开始学习</button>
                                                                        
                                </a>
                                                        <!-- 未登录时 -->
                            <!-- <a target="_blank" href="/video/1430" class="J-media-item studyvideo">1-1 Java简介 (05:49)
                                <button class="r moco-btn moco-btn-blue preview-btn">预览</button>
                            </a> -->
                        </li>
                                                <li data-media-id="6424">
                                                            <a href='/code/6424' class="J-media-item">
                                    <i class="icon-code type"></i>
                                    15-8 垂直居中-父元素高度确定的多行文本（方法二）
                                    
                                                                        <button class="r moco-btn moco-btn-red preview-btn">开始学习</button>
                                                                        
                                </a>
                                                        <!-- 未登录时 -->
                            <!-- <a target="_blank" href="/video/1430" class="J-media-item studyvideo">1-1 Java简介 (05:49)
                                <button class="r moco-btn moco-btn-blue preview-btn">预览</button>
                            </a> -->
                        </li>
                                                <li data-media-id="6107">
                                                            <a href='/code/6107' class="J-media-item">
                                    <i class="icon-code type"></i>
                                    15-9 隐性改变display类型
                                    
                                                                        <button class="r moco-btn moco-btn-red preview-btn">开始学习</button>
                                                                        
                                </a>
                                                        <!-- 未登录时 -->
                            <!-- <a target="_blank" href="/video/1430" class="J-media-item studyvideo">1-1 Java简介 (05:49)
                                <button class="r moco-btn moco-btn-blue preview-btn">预览</button>
                            </a> -->
                        </li>
                                            </ul>
                                        <!-- 章节小节 end -->
                </div>
                                    </div>
            <!-- 课程章节 end -->
        </div><!--content end-->
        <div class="aside r">
            <div class="bd">
    
        
        <div class="box mb40 js-usercard-box">
        <h4>讲师提示</h4>
                <div class="no-teacher"></div>
                        <div class="course-info-tip">
                        <dl class="first">
                <dt>课程须知</dt>
                <dd class="autowrap">没有任何WEB经验的WEB应用程序开发者、对WEB前端技术感兴趣的用户均可学习。</dd>
            </dl>
                                    <dl>
                <dt>老师告诉你能学到什么？</dt>
                <dd class="autowrap">轻松学习HTML、CSS样式基础知识，可以利用HTML、CSS样式技术制作出简单页面。</dd>
            </dl>
                    </div>
            </div>
    
    <div class="js-recom-box">
	<!-- <div class="box mb40 all-attention-box">
		<h4>大家都关注</h4>
		<div class="js-all-attention all-attention">
			<a href="" target="_blank" data-id="1" class="">aa</a>
			<a href="" target="_blank" data-id="2" class="">biubiu~</a>
			<a href="" target="_blank" data-id="3" class="">一个前端开发的修养</a>
			<a href="" target="_blank" data-id="4" class="">呵呵</a>
			<a href="" target="_blank" data-id="5" class="">维萨只有前端有修养</a>
			<a href="" target="_blank" data-id="6" class="">别说笑了</a>
			<a href="" target="_blank" data-id="7" class="">修养是什么</a>
			<a href="" target="_blank" data-id="8" class="">能吃么</a>
		</div>
	</div> -->
	<!-- <div class="box mb40 recom-course-list-box">
		<h4>推荐课程</h4>                   
		<ul class="js-recom-course recom-course-list clearfix">
			<li class="clearfix">                    
				<a href="http://www.imooc.com/learn/327" class="clearfix" target="_blank">
					<div class="l course-img" style="background-image: url(images/cover015_s.jpg);">
						<div class="cart-color purple"></div>
					</div>
					<div class="l content-box">                            
						<p class="smalle-title">测试克隆慕课网</p>                            
						<p class="content-text" title="asfsafsafsafsadfsafsad">asfsafsafsafsadfsafsad</p>                            
						<div class="clearfix learn-detail">                                
							初级<span>·</span>138人在学                            
						</div>                        
					</div>                    
				</a>                
			</li>
			<li class="clearfix">                    
				<a href="http://www.imooc.com/learn/327" class="clearfix" target="_blank">
					<div class="l course-img" style="background-image: url(images/cover015_s.jpg);">
						<div class="cart-color purple"></div>
					</div>
					<div class="l content-box">                            
						<p class="smalle-title">测试克隆慕课网</p>                            
						<p class="content-text" title="asfsafsafsafsadfsafsad">asfsafsafsafsadfsafsad</p>                            
						<div class="clearfix learn-detail">                                
							初级<span>·</span>138人在学                            
						</div>                        
					</div>                    
				</a>                
			</li>
			<li class="clearfix">                    
				<a href="http://www.imooc.com/learn/327" class="clearfix" target="_blank">
					<div class="l course-img" style="background-image: url(images/cover015_s.jpg);">
						<div class="cart-color purple"></div>
					</div>
					<div class="l content-box">                            
						<p class="smalle-title">测试克隆慕课网</p>                            
						<p class="content-text" title="asfsafsafsafsadfsafsad">asfsafsafsafsadfsafsad</p>                            
						<div class="clearfix learn-detail">                                
							初级<span>·</span>138人在学                            
						</div>                        
					</div>                    
				</a>                
			</li>
		</ul>  
	</div> -->
</div>

</div>        </div>
    </div>
    <div class="clear"></div>

</div>
<!-- 视频介绍 -->
<div id="js-video-wrap" class="video pop-video" style="display:none">
    <div class="video_box" id="js-video"></div>
    <a href="javascript:;" class="pop-close icon-close"></a>
</div>

</div>

<div id="footer" >
    <div class="waper">
        <div class="footerwaper clearfix">
            <div class="followus r">
                <a class="followus-weixin" href="javascript:;"  target="_blank" title="微信">
                    <div class="flw-weixin-box"></div>
                </a>
                <a class="followus-weibo" href="http://weibo.com/u/3306361973"  target="_blank" title="新浪微博"></a>
                <a class="followus-qzone" href="http://user.qzone.qq.com/1059809142/" target="_blank" title="QQ空间"></a>
            </div>
            <div class="footer_intro l">
                <div class="footer_link">
                    <ul>
                        <li><a href="http://www.imooc.com/" target="_blank">网站首页</a></li>
                        <li><a href="/about/cooperate" target="_blank" title="企业合作">企业合作</a></li>
                        <li><a href="/about/job" target="_blank">人才招聘</a></li>
                        <li> <a href="/about/contact" target="_blank">联系我们</a></li>
                        <li> <a href="/about/recruit" target="_blank">讲师招募</a></li>
                        <li> <a href="/about/faq" target="_blank">常见问题</a></li>
                        <li> <a href="/user/feedback" target="_blank">意见反馈</a></li>
                        <li><a href="http://daxue.imooc.com/" target="_blank">慕课大学</a></li>
                        <li> <a href="/about/friendly" target="_blank">友情链接</a></li>
                       <!--  <li><a href="/corp/index" target="_blank">合作专区</a></li>
                        <li><a href="/about/us" target="_blank">关于我们</a></li> -->
                    </ul>
                </div>
                <p>Copyright © 2017 imooc.com All Rights Reserved | 京ICP备 13046642号-2</p>
            </div>
        </div>
    </div>
</div>


<div id="J_GotoTop" class="elevator">

    <a href="/user/feedback" class="elevator-msg" target="_blank">
        <i class="icon-feedback"></i>
        <span class="">意见反馈</span>
    </a>
    <a href="/about/faq" class="elevator-faq" target="_blank">
        <i class="icon-ques"></i>
        <span class="">常见问题</span>
    </a>
    <a href="http://www.imooc.com/mobile/app" target="_blank" class="elevator-app" >
        <i class="icon-appdownload"></i>
        <span class="">APP下载</span>
        <div class="elevator-app-box"></div>
    </a>
    <a href="javascript:void(0)" class="elevator-weixin no-goto" id="js-elevator-weixin" >
        <i class="icon-wxgzh"></i>
        <span class="">官方微信</span>
        <div class="elevator-weixin-box"></div>
    </a>
    <a href="javascript:void(0)" class="elevator-top no-goto" style="display:none" id="backTop">
        <i class="icon-up2"></i>
        <span class="">返回顶部</span>
    </a>
</div>



<!--script-->
<script src="js/ssologin_1.js"></script>
<script type="text/javascript" src="js/sea_1.js"></script>
<script type="text/javascript" src="js/sea_config_1.js"></script>
<script type="text/javascript">seajs.use("/static/page/"+OP_CONFIG.module+"/"+OP_CONFIG.page);</script>

 

<script type="text/javascript">
  (function(){
    var imgPic = GC.course.pic || 'http://img.mukewang.com/static/img/common/logo.png',
        text = '我正在参加@慕课网  的一门课程【' + GC.course.name + '】，很不错哦！快来一起学习吧！', //节名称
        url = 'http://www.imooc.com' + window.location.pathname;

    window._bd_share_config = {
        "common": {
            "bdUrl": url,
            "bdSnsKey": {
              'tsina':'2254855082'
            },
            "bdText": text,
            "bdMini": "2",
            "bdMiniList": false,
            "bdPic": imgPic,
            "bdStyle": "0",
            "bdSize": "16"
        },
        "share": {}
    };
    setTimeout(function(){
            with(document) 0[(getElementsByTagName('head')[0] || body).appendChild(createElement('script')).src = 'http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion=' + ~(-new Date() / 36e5)];
        },1000)

  })();
</script>
<div class="mask"></div>


<div style="display: none">
<script type="text/javascript">
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3Ff0cfcccd7b1393990c78efdeebff3968' type='text/javascript'%3E%3C/script%3E"));
(function (d) {
window.bd_cpro_rtid="rHT4P1c";
var s = d.createElement("script");s.type = "text/javascript";s.async = true;s.src = location.protocol + "//cpro.baidu.com/cpro/ui/rt.js";
var s0 = d.getElementsByTagName("script")[0];s0.parentNode.insertBefore(s, s0);
})(document);
</script>
<script>
(function(){
    var bp = document.createElement('script');
    bp.src = '//push.zhanzhang.baidu.com/push.js';
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(bp, s);
})();
</script>
</div>
</body>
</html>
